<template>
    <div class="register">
        <div class="form_container">
            <div class="manage_tip">
                <div class="title">大白后台管理系统</div>
                <el-form :model="registerUser" status-icon :rules="rules" ref="registerForm" label-width="80px"
                    class="demo-ruleForm">
                    <el-form-item label="用户名" prop="name">
                        <el-input type="text" v-model="registerUser.name" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input type="text" v-model="registerUser.email" placeholder="请输入email"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="registerUser.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="password2">
                        <el-input type="password" v-model="registerUser.password2" placeholder="请确认密码"></el-input>
                    </el-form-item>
                    <el-form-item label="选择身份">
                        <el-select v-model="registerUser.identity" placeholder="请选择身份">
                            <el-option label="管理员" value="manager"></el-option>
                            <el-option label="员工" value="employee"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" class="submit_btn" @click="submitForm('registerForm')">注册</el-button>
                </el-form>
                <!-- <el-button type="primary" class="submit_btn" @click="validateEmail()">校验邮箱</el-button> -->

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'register',
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value !== this.registerUser.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        //验证邮箱是否被注册
        var validateEmail = (rule, value, callback) => {
            this.$axios.post('http://127.0.0.1:8080/api/user/email', {email:value}).then(res => {
                if (res.data.status == 1) {
                    callback(new Error('邮箱已被注册!'));
                } else {
                    callback();
                }
            })
        }
        return {
            registerUser: {
                name: '',
                email: '',
                password: '',
                password2: '',
                identity: ''
            },
            rules: {
                name: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度要在2-10个字符之间', trigger: 'blur' }
                ],
                email: [
                    { type: 'email', required: true, message: '邮箱格式不正确', trigger: 'blur' },
                    { validator: validateEmail, trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度要在6-15个字符之间', trigger: 'blur' }
                ],
                password2: [
                    { required: true, message: '确认密码不能为空', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度要在6-15个字符之间', trigger: 'blur' },
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.post('http://127.0.0.1:8080/api/user/register', this.registerUser).then(res => {
                        //注册成功
                        this.$message({
                            message: '账号注册成功！',
                            showClose: true,
                            type: 'success'
                        })
                        this.$router.push('/login')
                    })
                }
            });
        },
        // validateEmail() {
        //     this.$axios.post('http://127.0.0.1:8080/api/user/email', {email:this.registerUser.email}).then(res => {
        //         console.log(res.data.status);
        //         if (res.data.status == 1) {
        //             this.$message({
        //                 message: '邮箱已被注册',
        //                 showClose: true,
        //                 type: 'error'
        //             })
        //         }
        //     }).catch(err => console.log(err))
        // }
    }
}

</script>

<style scoped>
.register {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../assets/bg.jpg);
    background-size: 100% 100%;
    height: 100%;
}

.form_container {
    background-color: #fff;
    border-radius: 10px;
}

.form_container .manage_tip .title {
    font-family: "Microsoft YaHei";
    font-weight: bold;
    font-size: 26px;
    padding-top: 25px;
}

.demo-ruleForm {
    padding: 25px;
}

/* .registerForm {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 40px 20px 20px;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #cccc;
} */

.submit_btn {
    width: 100%;
}
</style>